<template>
  <div class="about" style="background: #F0F0F0; padding-bottom: 60px">
    <div class="box1">
      <div><router-link to="/car" class="jian"></router-link></div>
      <div class="gou">我的</div>
      <router-link to="/quit" style="color: black"><div id="bianji">设置</div></router-link>
    </div>
    <section style="margin-top: 50px">
      <!-- 头像 -->
      <div class="touxiang">
        <div>
          <img src="../../public/img/tou1.jpg" alt="" />
        </div>
        <div><span><router-link to="/login">{{userss}}</router-link></span><span>{{phone}}</span></div>
        <div><i class="iconfont iconyoujiantou"></i></div>
      </div>
      <div class="dingdan">
        <div class="ding_1">
          <span>我的订单</span>
          <span>查看全部订单 <i class="iconfont iconyoujiantou"></i></span>
        </div>
        <div class="ding_2">
          <div><i class="iconfont icon-qian-copy"></i><span>待付款</span></div>
          <div><i class="iconfont icon-daifahuo"></i><span>待发货</span></div>
          <router-link to="/dai"><div><i class="iconfont icon-yifahuo"></i><span>已发货</span></div></router-link>
          <div><i class="iconfont icon-shouhou"></i><span>售后</span></div>
        </div>
      </div>
      <!-- 成就奖励 -->
      <div class="gongju" style="margin-bottom:10px">
        <div class="ding_1">
          <span>必备工具</span>
          <span>查看全部工具 <i class="iconfont iconyoujiantou"></i></span>
        </div>
        <div class="fanxian" >
          <div  v-for="(item,index) in nav" :key="index">
            <img :src="item.src" alt="" width="30px">
            <span>{{item.title}}</span>
          </div>
        </div>
      </div>
      <!-- 我的问答 -->
      <div class="wode">
        <p>我的地址 <span><i class="iconfont iconyoujiantou"></i></span></p>
      </div>
      <div class="wode_1">
        <p>优惠券 <span>还没有优惠券哦<i class="iconfont iconyoujiantou"></i></span></p>
        <p>我的兑换码 <span>礼品卡兑换入口<i class="iconfont iconyoujiantou"></i></span></p>
      </div>
      <div class="wode_1">
        <p>意见反馈 <span><i class="iconfont iconyoujiantou"></i></span></p>
        <p>我的收藏<span><i class="iconfont iconyoujiantou"></i></span></p>
      </div>
      <!-- 分享 -->
      <!-- <div class="fenxiang">
        <p><span>—————</span>分享<span>—————</span></p>
        <div>
          <span><img src="../../public/img/icon_douban.png" alt="" width="100%"></span>
          <span><img src="../../public/img/icon_qq.png" alt="" width="100%"></span>
          <span><img src="../../public/img/icon_qzone.png" alt="" width="100%"></span>
          <span><img src="../../public/img/icon_weichat.png" alt="" width="100%"></span>
          <span><img src="../../public/img/icon_xinlang.png" alt="" width="100%"></span>
        </div>
      </div> -->
    </section>
  </div>
</template>


<style lang="less" scoped>
  /*初始化*/
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
  }
  .box1{
    position: fixed;
    top:0;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 50px;
    font-size: 14px;
    text-align: center;
    line-height: 53px;
    border-bottom: 1px solid #d8d8d8;
    /*position: relative;*/
    background: white;
    span{
      color: #000000;
    }
    .gou{
      margin-left: 30px;
    }
    .jian{
      position: absolute;
      left: 0;
      top: 0;
      width: 50px;
      height: 50px;
      background: url("../../public/img/arrow-left.png") no-repeat center center;
      background-size: 50%;
    }
  }
  // 头像
  .touxiang {
    height: 100px;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 20px;
    background-color:#66acaa;
  }
  .touxiang div:nth-child(1) {
    flex: 2;
    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
  }
  .touxiang div:nth-child(2) {
    flex: 7;
    padding-top: 5px;
    span {
      display: block;
    }
  }
  .touxiang div:nth-child(3) {
    flex: 1;
    padding-top: 12px;
    margin-left: 3px;
    i {
      font-size: 28px;
      color: white;
    }
  }
  .touxiang div:nth-child(2) span:nth-child(1) {
    font-size: 18px;
    color: white;
    a{
      color: #ffffff;
    }
  }
  .touxiang div:nth-child(2) span:nth-child(2) {
    font-size: 16px;
    color: white;
  }
  .dingdan, .gongju{
    width: 90%;
    margin:20px auto;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    padding: 15px 20px 10px;
    background-color: #fff;
  }
  .ding_1{
    display: flex;
    width: 100%;
    justify-content: space-between;
    font-size: 14px;
    // padding-bottom: 5px;
  }
  .ding_1 span:nth-child(1){
    margin-left:8px;
  }
  .ding_1 span:nth-child(2){
    margin-left:8px;
    color: #999999;
  }
  .ding_2 span:nth-child(2){
    color:#8C8C8C;
    margin-right:8px;
  }
  .ding_2{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding: 15px 0 5px;
    text-align: center;
    i{
      display: block;
      font-size: 26px;
      color: #ee870b;
      width: 44px;
      text-align: center;
      background-color: #f2f4f3;
      border-radius: 50%;
      margin-bottom: 5px;
    }
    span{
      width: 43px;
      display: block;
    }
  }
  // 成就奖励
  .fanxian{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 5px;
    margin-bottom: 10px;
  }
  .fanxian div{
    text-align: center;
    width: 25%;
    display: flex;
    flex-direction: column;
    img{
      margin: 15px auto 5px;
    }
  }
  // 我关注的频道
  .guanzhu{
    width: 90%;
    margin:0 auto;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    padding: 0 0 10px;
  }
  .wode{
    width: 90%;
    height: 45px;
    margin: 20px auto;
    border-radius: 15px;
    line-height: 45px;
    padding: 0 20px;
    font-size: 16px;
    background-color: #fff;
    p span{
      color: #999999;
      float: right;
    }
  }
  .wode_1{
    width: 90%;
    margin: 20px auto;
    border-radius: 15px;
    // line-height: 45px;
    padding: 0 20px;
    font-size: 16px;
    background-color: #fff;
    p{
      height: 50px;
      line-height: 50px;
      margin-bottom: 0;
      span{
        font-size: 14px;
        color: #999999;
        float: right;
      }
    }
    p:nth-child(2){
      border-top: 1px solid #cccccc;
    }
  }
  // 分享
  .fenxiang{
    width: 80%;
    margin: 25px auto 0;
    p{
      text-align: center;
      font-size: 16px;
      color: #999999;
      margin-bottom: 5px;
      span{
        margin:0 20px;
      }
    }
    div{
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-around;
      span{
        display: inline-block;
        width: 15%;
        border-radius: 50%;
        background-color: #ffffff;
      }
    }
  }
</style>


<script>
    export default{
        data(){
            return{
             userss:'登录',//用户名
             phone:'',//手机号码
                nav:[ // 底部标签数据
                    {src:"img/tb_1.png",title:'每日返现'},
                    {src:"img/tb_2.png",title:'领券中心'},
                    {src:"img/tb_3.png",title:'闲置换钱'},
                    {src:"img/tb_4.png",title:'客服小蜜'},
                    {src:"img/tb_5.png",title:'花呗'},
                    {src:"img/tb_6.png",title:'我的快递'},
                    {src:"img/tb_7.png",title:'我的评价'},
                    {src:"img/tb_8.png",title:'主题'},
                ],
            }
        },
        mounted(){
          if(localStorage.getItem("user")!=null){
             var ff=JSON.parse(localStorage.getItem("user"))
             console.log(ff);
             this.userss=ff.user;
             this.phone=ff.phone;
          }
        },
    }
</script>